<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>線上飲料下單系統</title>
    <link rel="stylesheet" type="text/css" 
      href="http://code.google.com/css/dev_docs.css"/>
    <!-- Override the imported CSS when displaying the sample application -->
    <style>
.plain {
    border: 0;
    padding: 5px 5px 5px 5px;
}
.eventinfo {
    background-color: rgb(195, 217, 255);
}
    </style>
    <!-- leopard
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAHUJ544kmk0D83CMq0ydCeBSOabRVzNqOiaSNpMyRC-xUgdVLYRRs_l9uqPIW7qwChWRpMfa-8_WVBw"></script>
    -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiwijHucUBwRVA1ZhX2QRzhTMHHt33bT2j9FKdlHN22weIiB2JBSqlgq9NmS3j4HgVqSgj891wxKPnQ"></script>
    <script type="text/javascript" src="manage_order.js"></script>
    <script type="text/javascript">
      google.load("gdata", "1.x");
      google.setOnLoadCallback(manage_order_init);
    </script>
  </head>
  <body>
    <table class="plain">
      <tr>
        <td class="plain" style="padding-right:20px;vertical-align:top;" colspan="2">
          <h2>查看你的下單飲料</h2>
        </td>
      </tr>
      <tr>
        <td class="plain" style="width:460px;">
          <table class="plain">
            <tr id="default-pane" style="display:none">
              <td class="plain" style="height:404px; width:460px; background-color: rgb(158,200,255); text-align:center; vertical-align:middle">
                <input id="auth-button" type="button" value="點我登入查詢系統" onclick="login()" style="margin:5px 0px 5px 0px;"/>  
              </td>
            <tr id="authenticated-pane" style="display:none"> 
              <td class="plain" style="height:auto;background-color: rgb(158,200,255);text-align:center;">
                <div id="dropdown">
                  請選擇一個訂單來查看
                  <select id="event-select" style="width:120px" disabled="disabled">
                    <option>更新中...</option>
                  </select>
                </div>
                <div id="event-table">
                  <table class="plain" style="background-color: rgb(195, 217, 255);margin: 5px 10px 0px 10px;padding: 5px 5px 5px 5px">
                    <tr>
                      <td class="plain eventinfo">訂單編號:</td>
                      <td class="plain eventinfo"><input id="title-field" type="text" style="width:100%" onclick="setStatus();"/></td>
                    </tr>
                    <tr>
                      <td class="plain eventinfo">日期:</td>
                      <td class="plain eventinfo"><input id="date-field" type="text" style="width:100%" onclick="setStatus();"/></td>
                    </tr>
                    <tr>
                      <td class="plain eventinfo">地點:</td>
                      <td class="plain eventinfo"><input id="location-field" type="text" style="width:100%" onclick="setStatus();"/></td>
                    </tr>
                    <tr>
                      <td class="plain eventinfo">店家:</td>
                      <td class="plain eventinfo"><div id="attendees-field"></div></td>
                    </tr>
                    <tr>
                      <td class="plain eventinfo" style="vertical-align:top">訂單內容:</td> 
                      <td class="plain eventinfo"><textarea id="notes-field" cols="40" rows="10" onclick="setStatus();"></textarea></td>
                    </tr>
                  </table>
                  <input id="logout-button" type="button" value="登出" onclick="logout()" style="float:left; margin:5px 0px 5px 0px;"/>
                  <input id="save-button" type="button" value="更新訂單" onclick="saveEvent()" style="float:left; margin:5px 0px 5px 0px;"/>
                  <div id="status-area" style="float:right; margin:5px 0px 5px 0px;"></div>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
    <div>
      <h2> <a href="order.html">請到此下訂單</a></h2>
    </div>
        </td>
      </tr>
    </table>
    <!-- this image is must have one for break through the security limits in browser-->
    <img src="/svn/moogle_logo.gif" style="display: none;"/>
  </body>
</html>
